<template>
  <div style="height: 100%;">
    <n-tabs type="line" style="display:inline-block;height: 100%;">
      <n-tab-pane name="chap1" tab="基本信息">
        <n-form
          :model="formData"
          :rules="formRules"
          ref="formInstance"
          label-placement="left"
          :label-width="SlashAppContext.getCoefficient()*80 + 'px'">
          <n-grid x-gap="12" :cols="2" responsive="self">

            <!-- <n-gi>
              <n-form-item label="用户名" path="username">
                <n-input clearable v-model:value="formData.username" placeholder="用户名" />
              </n-form-item>
            </n-gi> -->
            <n-gi>
              <n-form-item label="操作名称" path="operateMethodName">
                <n-input clearable v-model:value="formData.operateMethodName" placeholder="请输入" />
              </n-form-item>
            </n-gi>
            <n-gi>
              <n-form-item label="操作方法" path="operateMethodClassName">
                <n-input clearable v-model:value="formData.operateMethodClassName"
                         placeholder="请输入" />
              </n-form-item>
            </n-gi>
            <n-gi>
              <n-form-item label="IP" path="operateIp">
                <n-input clearable v-model:value="formData.operateIp" placeholder="请输入" />
              </n-form-item>
            </n-gi>
            <n-gi>
              <n-form-item label="类别" path="categoryName">
                <n-input clearable v-model:value="formData.categoryName" placeholder="请输入" />
              </n-form-item>
            </n-gi>
            <n-gi>
              <n-form-item label="类型" path="type">
                <n-input clearable v-model:value="formData.type"
                         placeholder="" />
              </n-form-item>
            </n-gi>

            <n-gi>
              <n-form-item label="地址" path="uri">
                <n-input clearable v-model:value="formData.uri" placeholder="请输入操作地址" />
              </n-form-item>
            </n-gi>
            <n-gi>
              <n-form-item label="序列号" path="requestSeq">
                <n-input clearable v-model:value="formData.requestSeq" placeholder="请输入操作序列号" />
              </n-form-item>
            </n-gi>


          </n-grid>
        </n-form>
      </n-tab-pane>
      <n-tab-pane name="chap2" tab="输入参数" style="height: 100%">
        <div style="height: calc(100% - 50px)">
          <code-editor v-model:value="requestParametersStr" />
        </div>
      </n-tab-pane>
      <n-tab-pane name="chap3" tab="输出参数" style="height: 100%">
        <div style="height: calc(100% - 50px)">

          <code-editor v-model:value="responseParametersStr" style="height:100vh" />
        </div>
      </n-tab-pane>
      <n-tab-pane name="chap4" tab="错误日志" style="height: 100%">
        <div style="height: calc(100% - 50px)">

          <code-editor v-model:value="formData.errorLog" />
        </div>
      </n-tab-pane>
    </n-tabs>

  </div>

</template>
<script lang="ts">
import { onMounted, ref } from "vue";
import { formRules } from "./Service";
import httpApi from "./httpApi";
import { FormInst } from "naive-ui";
import { SlashAppContext, checkFormData } from "slash-admin";

export default {
  props: {
    id: {
      type: [String, Number],
      default: null
    },
    readMode: {
      type: [String],
      default: "read"
    }
  },
  setup: function(props) {
    const formInstance = ref<FormInst | null>(null);
    const formData = ref<any>({
      id: props.id,
      enabled: 1
    });
    const requestParametersStr = ref("");
    const responseParametersStr = ref("");
    const init = async () => {
      if (props.id) {
        let msg = await httpApi.selectById(props.id);
        formData.value = msg.data;
        requestParametersStr.value = JSON.stringify(formData.value.requestParameters);
        responseParametersStr.value = JSON.stringify(formData.value.responseParameters);

      }
    };
    const doSubmit = async () => {
      await checkFormData(formInstance);
      return httpApi.doSaveEntity(formData.value);
    };
    const doUpdate = async () => {
      await checkFormData(formInstance);
      return httpApi.doUpdateEntity(formData.value);
    };
    onMounted(() => {
      init();
    });
    return {
      formData,
      formInstance,
      formRules,
      doSubmit,
      doUpdate,
      requestParametersStr,
      responseParametersStr,
      SlashAppContext
    };
  }
};
</script>

<style lang="less" scoped></style>
